<template>
  <div class="title">消息通知</div>
  <div class="content">
    <div class="contentData" v-for="item in info.data.data" :key="item.id">
      <div class="data">{{ item.createTime }}</div>
      <div class="info">
        <div class="infoTitle">{{ item.title }}</div>
        <div class="infoContent">{{ item.detail }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { getNoticePage } from "@/api/http.js";

export default defineComponent({
  setup() {
    const info = reactive({
      data: [],
    });

    const getInfo = async () => {
      const { data } = await getNoticePage({ pageSize: 999, pageNum: 1 });
      info.data = data;
      console.log(data);
    };

    getInfo();

    return {
      info,
    };
  },
});
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  height: 60px;
  background: #444444;
  font-size: 1.125rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}
.content {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding: 20px 4%;
  background-color: #e5e5e5;

  .contentData {
    margin-top: 20px;
    width: 100%;
    color: var(--textColor);

    .data {
      width: 100%;
      text-align: center;
      color: #666666;
    }
    .info {
      width: 100%;
      margin-top: 10px;
      padding: 15px;
      background-color: var(--backColor);
      border-radius: 20px;

      .infoTitle {
        font-size: 1rem;
        font-family: PingFang SC;
        font-weight: 800;
        line-height: 25px;
      }

      .infoContent {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 10px;
        line-height: 20px;
        color: var(--textColorTwo);
      }
    }
  }
}
</style>
